import { h } from "vue"
import Iconify from '@/components/Iconify/index.vue'
import notFound from '@/assets/images/image-404.png'
import { chartColors, type CustomColorsType } from "@/views/dataview/setting/chartTheme"
import type { number } from "echarts/core"

const imagesModules = import.meta.glob('../assets/images/chart/**',{eager: true}) //同步引入

export const renderIcon = (icon:string,set={})=>{
    // h函数的第一个参数是组件，第二个参数是组件的props，第三个参数是组件的子项
    return h(Iconify,{icon,...set})
}

export const fetchMenuImgUrl = (config:any)=>{
    const {image} = config
    // 如果完整url则直接返回
    if(/^(http|https):\/\/([\w.]+\/?)\S*/.test(image))return image
    // base64格式直接返回
    if(image.includes('@') || image.includes("base64")) return image
    for(let module in imagesModules){
        let formate = module.split('/')
        if(formate[formate.length-1] === image){
            // @ts-ignore
            return imagesModules[module]?.default
        }
    }
    return notFound
}

// 动态注册组件
export const componentInstall = (key:string,node:any)=>{
    // 未注册就进行组件注册
    // @ts-ignore
    if(!window['$vue'].component(key) && node) {
        // @ts-ignore
        window['$vue'].component(key, node) //key是VBarCommon或VCBarcommon
    }
}

// * 变换
export const getTransformStyle = (styles: any) => {
    const { rotateZ, rotateX, rotateY, skewX, skewY } = styles
    return {
        transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${
            skewX || 0
        }deg) skewY(${skewY || 0}deg)`
    }
}

//   合并自定义颜色和基础颜色
export const colorCustomMerge = (customerColor?:CustomColorsType[])=>{
    type FormateCustomColorResType = {
        [T:string]:{
            name:string,
            color:string[]
        }
    }
    const formateCustomColor: FormateCustomColorResType = {}
    customerColor?.forEach((item:any)=>{
        formateCustomColor[item.id] = {
            color:item.color,
            name:item.name
        }
    })
    return {...formateCustomColor,...chartColors}
}

export const setComponentPosition = (target:any,x?:number,y?:number)=>{
    x && (target.attr.x = x)
    y && (target.attr.y = y)
}